<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ལམ་ཐིག་སྟག་རིས་ཅན། </title>
    <style>
        body {
            margin: 0;
            background: url("/image/bg.jpg") no-repeat fixed;
            background-size: cover;
        }

        .home-close {
            color: #fff;
            background-color: #008FCC;
            border-radius: 4px;
        }

        .container-top {
            height: 45px;
            background-color: #fff;
            border: #eeeeee solid 1px;
            border-radius: 5px 5px 0px 0px;
        }

        button {
            width: 100px;
            padding: 5px;
            background-color: #fff;
            border-color: #357ebd;
            color: #428bca;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px; /* future proofing */
            -khtml-border-radius: 10px; /* for old Konqueror browsers */
            text-align: center;
            vertical-align: middle;
            border: 1px solid transparent;
            font-weight: 900;
            font-size: 125%;
            cursor: pointer;
        }

        .car {
            display: inline-block;
        }

        .home-pos {
            height: 45px;
            background-color: #fff;
            line-height: 45px;
            float: left;
            padding-left: 127px;
            color: #666;
        }

        body {
            margin: 0px;
            padding: 0px;
            font-family: "Microsoft YaHei";
        }

        .home-right {
            float: right;
            height: 45px;
            background-color: #fff;
            line-height: 45px;
        }

        a {
            color: #666;
            text-decoration: none;
        }

        .home-black {
            color: black;
            background: url(/image/check.png) no-repeat;
            background-position: top right;
        }
        .button1 {
            display: inline-block;
            border-radius: 4px;
            background-color: #00c0ef;
            border: none;
            color: #FFFFFF;
            text-align: center;
            font-size: 15px;
            padding: 5px;
            width: 90px;
            transition: all 0.5s;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
<div class="container-top">
    <div class="home-pos">བསལ་འདེམས་ཀྱི་ཚན་ཁག།（选择科目）<span class="home-pos-line">&nbsp;|&nbsp;</span></div>
    <div class="home-right">
        སྤྱོད་མཁན།（用户）：<span id="name"></span>（<span id="time"></span>）&nbsp;
        <button class="button1" style="vertical-align:middle" title="回到主页" onclick="toCar()">
            <span>回到主页</span>
        </button>
        <button class="button1" style="vertical-align:middle" title="我的错题" onclick="MyError()">
            <span>我的错题</span>
        </button>
        <button class="button1" style="vertical-align:middle" title="修改密码" onclick="MyEditPass()">
            <span>修改密码</span>
        </button>
        <button class="button1" style="vertical-align:middle" title="继续做题" onclick="ContPlay()">
            <span>继续做题</span>
        </button>
        <%--<a href="javascript:void(0)" title="ཕྱིར་ལོག་ནས་ཆེས་དུས་འགོ།" onclick="toCar()">ཕྱིར་ལོག་ནས་ཆེས་དུས་འགོ།</a>&nbsp;&nbsp;--%>
        <%--<a href="javascript:void(0)" title="ང་འི་ནོར་བ་འབྲི།" onclick="MyError()">ང་འི་ནོར་བ་འབྲི།</a>&nbsp;&nbsp;--%>
        <%--<a href="javascript:void(0)" title="བཟོ་བཅོས་ཨང་ཡིག།" onclick="MyEditPass()">བཟོ་བཅོས་ཨང་ཡིག།</a>&nbsp;&nbsp;--%>
        <%--<a href="javascript:void(0)" title="མུ་མཐུད་འདྲི་གཞི།" onclick="ContPlay()">མུ་མཐུད་འདྲི་གཞི།</a>&nbsp;&nbsp;--%>
        <%--<a href="/user/loginOut?type=2" class="home-close" style="color: #fff;" title="བསུབ།" id="userOut">&nbsp;X&nbsp;</a>--%>
        <button class="button1" style="vertical-align:middle" title="退出考试" onclick="javascript:window.location.href='${pageContext.request.contextPath}/user/loginOut?type=2'">
            <span>退出考试</span>
        </button>
    </div>
</div>
<div id="content"></div>

</body>
<script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/static/layer/layer.js"></script>
<script>
    var data;
    var userData;
    var saveHint;
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]); return null;
    }
    $(function () {
        console.info(location.search);
        $.get("${pageContext.request.contextPath}/user/levelAndUserLeSecondtype", {}, function (msg) {
            var exerId = getQueryString("exerId");
            var carId = getQueryString("carId");
            var couserId = getQueryString("couserId");
            data = msg["uservos"];
            userData = msg["user"];
            $("#name").html(userData.username);
            $("#time").html(formatDateTime(userData.timelimit));
            saveHint = $(".home-pos").html();
            if (exerId) {
                toSencedType(carId, couserId, exerId);
            } else {
                console.info(msg);
                $.each(data, function (i, e) {
                    var $div = $("<div>").width("50%").height("35%").addClass("car");
                    var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block").css("margin-left", "40%").css("margin-top", "15%");
                    var $car = $("<img>").attr("src", e.imgpath);
                    var $text = $("<span>").html(e.ztitle).css("text-align", "center").css("display", "block");
                    $d.append($car);
                    $d.append("<br>").append("<br>").append($text);
                    $div.append($d);
                    $("#content").append($div);
                    $d.click(function () {
                        toCorse(e.id)
                    });
                });
            }
        }, "json");
    });

    function toCar() {
        hint("");
        $("#content").empty();
        $.each(data, function (i, e) {
            var $div = $("<div>").width("50%").height("35%").addClass("car");
            var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block").css("margin-left", "40%").css("margin-top", "15%");
            var $car = $("<img>").attr("src", e.imgpath).css("margin", " 0 auto");
            var $text = $("<span>").html(e.ztitle).css("text-align", "center").css("display", "block");
            $d.append($car);
            $d.append("<br>").append("<br>").append($text);
            $div.append($d);
            $("#content").append($div);
            $d.click(function () {
                toCorse(e.id)
            });
        });
    }

    function toTestByCourse(courseId,text) {
        layer.open({
            type: 2,
            title: 'ལད་མོ་རྒྱུགས་ལེན་ར་འཛེག།',
            area: ['1314.67px', '550px'],
            shadeClose: true,
            content: "${pageContext.request.contextPath}/page/user/zsimtest.jsp?courseId=" + courseId+"&text="+text+"&username="+userData["username"],
            success: function (layero, index) {
            }
        });
    }


    function addTest(courseId, imgpath, text,carName) {
        var $div = $("<div>").width("15%").height("25%").addClass("course").css("float", "left").css("margin-left", "10%").css("margin-top", "10%");
        var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block");
        var $car = $("<img>").attr("src", imgpath).css("margin", " 0 auto");
        var $text = $("<span>").html(text).css("text-align", "center").css("display", "block");
        $d.append($car);
        $d.append("<br>").append("<br>").append($text);
        $div.append($d);
        $("#content").append($div);
        $d.click(function () {
            toTestByCourse(courseId,carName);
        });
    }

    function hint(hint) {
        $(".home-pos").html(saveHint + hint);
    }

    function toCorse(carId) {
        var courseData;
        var carName;
        var saveId;

        $.each(data, function (i, e) {
            if (e.id == carId) {
                carName = e.ztitle;
                courseData = e.courseVoEnhances;
            }
        });
        hint(carName);
        $("#content").empty();
        $.each(courseData, function (i, e) {
            var courseId = e.id;
            var $div = $("<div>").width("15%").height("25%").addClass("course").css("float", "left").css("margin-left", "10%").css("margin-top", "10%");
            var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block");
            var $car = $("<img>").attr("src", e.imgpath).css("margin", " 0 auto");
            var $text = $("<span>").html(e.zname+"<br/>"+e.name).css("text-align", "center").css("display", "block");
            $d.append($car);
            $d.append("<br>").append("<br>").append($text);
            $div.append($d);
            $d.click(function () {
                toExer(carId, e.id)
            });
            $("#content").append($div);
            addTest(courseId, e.imgpath, e.zname + "ལད་མོ་རྒྱུགས་ལེན།"+"<br/>"+e.name+"模拟考试",carName);
        });
        $("#content").append($("<div>").css("clear", "both"));

        $("#content").append($("<button>").html("ཕྱིར།"+"<br/>返回").css("margin-left", "47%").click(function () {
            toCar();
        }));
    }

    function toExer(carId, couserId) {
        var exerData;
        var carName;
        var courseName;
        $.each(data, function (i, e) {
            if (e.id == carId) {
                var courseData = e.courseVoEnhances;
                carName = e.ztitle;
                $.each(courseData, function (i, e) {
                    if (e.id == couserId) {
                        courseName = e.zname;
                        exerData = e.exertypeVos;
                    }
                });
            }
        });
        hint(carName + "&nbsp;|&nbsp;" + courseName);
        $("#content").empty();
        $.each(exerData, function (i, e) {
            console.info(e);
            var $div = $("<div>").width("15%").height("25%").addClass("exer").css("float", "left").css("margin-left", "10%").css("margin-top", "5%");
            var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block");
            var $car = $("<img>").attr("src", e.imgpath).css("margin", " 0 auto");
            var $text = $("<span>").html(e.zname+"<br/>"+e.name).css("text-align", "center").css("display", "block");
            $d.append($car);
            $d.append("<br>").append("<br>").append($text);
            $div.append($d);
            $("#content").append($div);
            $d.click(function () {
                toSencedType(carId, couserId, e.id)
            });
        });
        $("#content").append($("<div>").css("clear", "both"));

        $("#content").append($("<button>").html("ཕྱིར།"+"<br/>返回").css("margin-left", "47%").click(function () {
            toCorse(carId);
        }));
    }

    function toSencedType(carId, couserId, exerId) {
        var secondData;
        var carName;
        var courseName;
        var exerName;
        $.each(data, function (i, e) {
            if (e.id == carId) {
                var courseData = e.courseVoEnhances;
                carName = e.ztitle;
                $.each(courseData, function (i, e) {
                    if (e.id == couserId) {
                        courseName = e.zname;
                        var exerData = e.exertypeVos;
                        $.each(exerData, function (i, e) {
                            if (e.id == exerId) {
                                exerName = e.zname;
                                secondData = e.secondTypes;
                            }
                        });
                    }
                });
            }
        });
        hint(carName + "&nbsp;|&nbsp;" + courseName + "&nbsp;|&nbsp;" + exerName);
        $("#content").empty();
        $.each(secondData, function (i, e) {
            console.info(e);
            var $div = $("<div>").width("12%").height("25%").addClass("secondtype").css("float", "left").css("margin-left", "8%").css("margin-top", "5%");
            var $d = $("<div>").css("cursor", "pointer").css("display", "inline-block").css("position", "absolute").css("padding", "15px").data("seId", e.id);
            var $car = $("<img>").attr("src", e.imgpath).css("margin", " 0 auto");
            var $text = $("<span>").html(e.zname+"<br/>"+e.name).css("text-align", "center").css("display", "block");
            $d.append($car);
            $d.append("<br>").append("<br>").append($text);
            $div.append($d);
            $("#content").append($div);
            $d.click(function () {
                if ($(this).hasClass("home-black")) {
                    $(this).removeClass("home-black");
                } else {
                    if ($(".home-black").length >= 3) {
                        layer.msg("亲，最多选中3套题哦！", {icon: 1, time: 1000});
                    } else {
                        $(this).addClass("home-black");
                    }
                }
            });
        });

        $("#content").append($("<div>").css("clear", "both"));
        $("#content").append($("<button>").html("གོ་རིམ་དྲིས་ལན་ཁ་བྱང།"+"<br/>顺序练习").css("margin-left", "37%").click(function () {
            var seids = "";
            $.each($(".home-black"), function (i, e) {
                if (i == 0) {
                    seids += $(this).data("seId");
                } else {
                    seids += "|" + $(this).data("seId");
                }
            });
            if (seids!=""||seids.length>0) {
                window.location.href = "${pageContext.request.contextPath}/toTemprorary/2-2-" + seids + "-2.html";
            }else {
                layer.msg("请选择套题",{icon:2,time:1000});
            }
        }));
        $("#content").append($("<button>").html("སྐབས་བསྟུན་གྱིས་དྲིས་ལན་ཁ་བྱང།"+"<br/>随机练习").css("margin-left", "5%").click(function () {
            var seids = "";
            $.each($(".home-black"), function (i, e) {
                if (i == 0) {
                    seids += $(this).data("seId");
                } else {
                    seids += "|" + $(this).data("seId");
                }
            });
            if (seids!=""||seids.length>0) {
                window.location.href = "${pageContext.request.contextPath}/toTemprorary/2-2-" + seids + "-1.html";
            }else {
                layer.msg("请选择套题",{icon:2,time:1000});
            }
        }));
        $("#content").append($("<button>").html("ཕྱིར།"+"<br/>返回").css("margin-left", "5%").click(function () {
            toExer(carId, couserId);
        }));
    }

    function formatDateTime(timeStamp) {
        var date = new Date();
        date.setTime(timeStamp * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        return y + '-' + m + '-' + d;
    };

    function MyError() {
        layer.open({
            type: 2,
            title: 'ང་འི་ནོར་བ་འབྲི།',
            area: ['350px', '230px'],
            fixed: false,
            maxmin: true,
            shadeClose: true,
            content: "${pageContext.request.contextPath}/page/user/zerrorSub.jsp",
            success: function (layero, index) {
            }
        });
    }

    function MyEditPass() {
        layer.open({
            type: 2,
            title: 'ཨང་ཡིག་བཟོ་བཅོས།',
            area: ['600px', '350px'],
            fixed: false,
            maxmin: true,
            shadeClose: true,
            content: "${pageContext.request.contextPath}/page/user/edit_pwd.jsp",
            success: function (layero, index) {
            }
        });
    }


    function ContPlay() {
        layer.open({
            type: 1,
            title: "ཆ་འཕྲིན།",
            area: ['300px', '150px'],
            btn: ["ངོས་འཛིན།", "མེད་པར་བཟོ་བ།"],
                content: "<span style='text-align:center;display: block;margin-top: 10px'>ཁྱེད་ཀྱི་ངོས་འཛིན་མིན་མུ་མཐུད་འདྲི་གཞི།</span>",
            yes: function () {
                $.get("${pageContext.request.contextPath}/temprorary/isExsit", {}, function (msg) {
                    if (msg["status"] == "success") {
                        exportData("${pageContext.request.contextPath}/toTemprorary/2-4-test.html");
                    }else {
                        layer.msg("ཁྱོད་ད་དུང་སྒྲུབ་མ་མྱོང་བའི་འདྲི་གཞི་ཨོ།",{icon:2,time:2000})
                    }
                }, "json");

            },
            btn1: function (index, layero) {
                layer.close(index);
            }
        });
    }

    function exportData(url) {
        window.location.href = url;
    }
</script>
</html>
